93:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"SWRDataProvider"] 95:T214d9,[V0_FILE]typescript:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import "./globals.css" export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.dev", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {/* Add Google Fonts for modern typography */} {children} ) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; :root { --background: oklch(0 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0 0 0); --sidebar-ring: oklch(0.439 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Adding shake animation keyframes for intensifies effect */ @keyframes shake { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-1px, -1px); } 20% { transform: translate(1px, -1px); } 30% { transform: translate(-1px, 1px); } 40% { transform: translate(1px, 1px); } 50% { transform: translate(-1px, -1px); } 60% { transform: translate(1px, -1px); } 70% { transform: translate(-1px, 1px); } 80% { transform: translate(1px, 1px); } 90% { transform: translate(-1px, -1px); } } /* Adding party rainbow animation keyframes */ @keyframes party { 0% { background-color: #fece7a; } 12% { background-color: #7eff7a; } 24% { background-color: #7effff; } 36% { background-color: #7ba3fe; } 48% { background-color: #cb70fe; } 60% { background-color: #fc49f5; } 78% { background-color: #fc4ea7; } 90% { background-color: #fd5258; } } /* Adding rainbow gradient animation for party button */ @keyframes rainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .shake-animation { animation: shake 0.1s infinite; } .party-animation { animation: party 1s infinite; } .rainbow-animation { animation: rainbow 3s infinite; } [V0_FILE]typescriptreact:file="components/color-picker.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" interface ColorPickerProps { value: string onChange: (color: string) => void colors?: string[] placeholder?: string className?: string } export function ColorPicker({ value, onChange, colors, placeholder = "#000000", className = "" }: ColorPickerProps) { const defaultColors = [ "#00000000", "#ffffff", "#000000", "#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#14b8a6", "#6366f1", "#a855f7", "#d946ef", "#84cc16", ] const colorPalette = colors || defaultColors return (

{/* Color palette grid */}

{colorPalette.map((color) => (

{/* Hex input */} { e.stopPropagation() const inputValue = e.target.value // Validate hex color format (with or without alpha) if (/^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(inputValue) || inputValue === "") { onChange(inputValue) } }} placeholder={placeholder} className="w-full h-8 bg-white/10 border border-white/20 rounded text-xs text-white placeholder:text-white/40" onClick={(e) => e.stopPropagation()} />

) } [V0_FILE]typescriptreact:file="components/toolbar.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { ChevronUp } from "lucide-react" import { LayersList } from "@/components/layers-list" type Layer = { id: string type: "text" | "image" | "rectangle" name: string x?: number y?: number width?: number height?: number scale?: number rotation?: number color?: string fontSize?: number fontFamily?: string fontWeight?: string textAlign?: "left" | "center" | "right" text?: string image?: HTMLImageElement borderRadius?: number src?: string } type Effect = { id: string type: "party" | "intensifies" party?: { intensity: number; blendMode: "multiply" | "screen" | "overlay" } intensifies?: { intensity: number } } type Canvas = { width: number height: number backgroundColor: string } type TimelineItem = { id: string type: "layer" | "effect" | "canvas" } interface SidebarProps { layers: Layer[] effects: Effect[] canvas: Canvas timeline: TimelineItem[] selectedLayer: string | null selectedEffect: string | null timelineCollapsed: boolean isProcessing: React.MutableRefObject addLayer: (layer: Layer) => void addEffect: (effect: Effect) => void setCanvas: (canvas: Canvas) => void setLayers: React.Dispatch> setEffects: React.Dispatch> setSelectedLayer: (id: string | null) => void setSelectedEffect: (id: string | null) => void setTimelineCollapsed: (collapsed: boolean) => void setTimeline: React.Dispatch> handleExport: () => void FONT_OPTIONS: Array<{ value: string; label: string }> } export function Toolbar({ layers, effects, canvas, timeline, selectedLayer, selectedEffect, timelineCollapsed, isProcessing, addLayer, addEffect, setCanvas, setLayers, setEffects, setSelectedLayer, setSelectedEffect, setTimelineCollapsed, setTimeline, handleExport, FONT_OPTIONS, }: SidebarProps) { const [showTimeline, setShowTimeline] = useState(false) return ( <> {/* LayersList component that expands upward from toolbar */} setShowTimeline(!showTimeline)} /> {/* Simplified toolbar with only timeline toggle */}

{/* Timeline toggle button */}

) } [V0_FILE]typescriptreact:file="components/transform-controls.tsx" isMerged="true" "use client" import type React from "react" import type React from "react" import { useState, useCallback, useEffect } from "react" interface UseTransformProps { layers: Layer[] setLayers: React.Dispatch> } export function useTransform({ layers, setLayers }: UseTransformProps) { const [transformState, setTransformState] = useState({ isDraggingCorner: null, dragStartPos: null, dragStartScale: 1, dragStartRotation: 0, dragStartDimensions: null, }) // Handle corner drag for scale and rotation const handleCornerMouseDown = useCallback( (e: React.MouseEvent, layerId: string, handle: string) => { e.preventDefault() e.stopPropagation() const layer = layers.find((l) => l.id === layerId) if (!layer) return setTransformState({ isDraggingCorner: `${layerId}-${handle}`, dragStartPos: { x: e.clientX, y: e.clientY }, dragStartScale: layer.scale || 1, dragStartRotation: layer.rotation || 0, dragStartDimensions: { width: layer.width || 100, height: layer.height || 100, }, }) }, [layers], ) // Handle transform controls movement useEffect(() => { const handleCornerMouseMove = (e: MouseEvent) => { if (!transformState.isDraggingCorner || !transformState.dragStartPos) return const [layerId, handle] = transformState.isDraggingCorner.split("-") const layer = layers.find((l) => l.id === layerId) if (!layer) return const deltaX = e.clientX - transformState.dragStartPos.x const deltaY = e.clientY - transformState.dragStartPos.y if (handle === "rotate") { // Rotate based on angle from center const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI) const newRotation = transformState.dragStartRotation + angle setLayers((prev) => prev.map((l) => (l.id === layerId ? { ...l, rotation: newRotation } : l))) } else { // All handles (corner and edge) now use proportional scaling const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY) const scaleFactor = 1 + (distance / 200) * (deltaX + deltaY > 0 ? 1 : -1) const newScale = Math.max(0.1, transformState.dragStartScale * scaleFactor) setLayers((prev) => prev.map((l) => (l.id === layerId ? { ...l, scale: newScale } : l))) } } const handleCornerMouseUp = () => { setTransformState({ isDraggingCorner: null, dragStartPos: null, dragStartScale: 1, dragStartRotation: 0, dragStartDimensions: null, }) } if (transformState.isDraggingCorner) { document.addEventListener("mousemove", handleCornerMouseMove) document.addEventListener("mouseup", handleCornerMouseUp) return () => { document.removeEventListener("mousemove", handleCornerMouseMove) document.removeEventListener("mouseup", handleCornerMouseUp) } } }, [transformState, layers, setLayers]) return { transformState, handleCornerMouseDown, } } export type TransformHandle = | "corner-nw" | "corner-ne" | "corner-sw" | "corner-se" | "edge-top" | "edge-bottom" | "edge-left" | "edge-right" | "rotate" export interface TransformState { isDraggingCorner: string | null dragStartPos: { x: number; y: number } | null dragStartScale: number dragStartRotation: number dragStartDimensions: { width: number; height: number } | null } export interface Layer { id: string type: "text" | "image" | "rectangle" name: string x?: number y?: number width?: number height?: number scale?: number rotation?: number color?: string fontSize?: number fontFamily?: string fontWeight?: string textAlign?: "left" | "center" | "right" text?: string image?: HTMLImageElement borderRadius?: number src?: string } interface TransformControlsProps { layer: Layer isSelected: boolean onMouseDown: (e: React.MouseEvent, layerId: string, handle: string) => void } export function TransformControls({ layer, isSelected, onMouseDown }: TransformControlsProps) { if (!isSelected) return null const scale = layer.scale || 1 const inverseScale = 1 / scale const handleStyle = { position: "absolute" as const, width: 8, height: 8, backgroundColor: "white", border: "1px solid #666", zIndex: 20, } return ( <> {/* Corner handles - proportional scaling */}

onMouseDown(e, layer.id, "corner-nw")} style={{ ...handleStyle, left: -4, top: -4, cursor: "nw-resize", transform: `scale(${inverseScale})`, transformOrigin: "center", }} />

onMouseDown(e, layer.id, "corner-ne")} style={{ ...handleStyle, right: -4, top: -4, cursor: "ne-resize", transform: `scale(${inverseScale})`, transformOrigin: "center", }} />

onMouseDown(e, layer.id, "corner-sw")} style={{ ...handleStyle, left: -4, bottom: -4, cursor: "sw-resize", transform: `scale(${inverseScale})`, transformOrigin: "center", }} />

onMouseDown(e, layer.id, "corner-se")} style={{ ...handleStyle, right: -4, bottom: -4, cursor: "se-resize", transform: `scale(${inverseScale})`, transformOrigin: "center", }} /> {/* Edge handles - non-proportional scaling */}

onMouseDown(e, layer.id, "edge-top")} style={{ ...handleStyle, left: "50%", top: -4, cursor: "n-resize", transform: `translateX(-50%) scale(${inverseScale})`, transformOrigin: "center", }} />

onMouseDown(e, layer.id, "edge-bottom")} style={{ ...handleStyle, left: "50%", bottom: -4, cursor: "s-resize", transform: `translateX(-50%) scale(${inverseScale})`, transformOrigin: "center", }} />

onMouseDown(e, layer.id, "edge-left")} style={{ ...handleStyle, left: -4, top: "50%", cursor: "w-resize", transform: `translateY(-50%) scale(${inverseScale})`, transformOrigin: "center", }} />

onMouseDown(e, layer.id, "edge-right")} style={{ ...handleStyle, right: -4, top: "50%", cursor: "e-resize", transform: `translateY(-50%) scale(${inverseScale})`, transformOrigin: "center", }} /> {/* Rotation handle */}

onMouseDown(e, layer.id, "rotate")} style={{ ...handleStyle, left: "50%", top: -20, borderRadius: "50%", cursor: "grab", transform: `translateX(-50%) scale(${inverseScale})`, transformOrigin: "center", }} /> {/* Rotation handle connector line */}

) } [V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { PanelLeftIcon } from "lucide-react" import { useIsMobile } from "@/hooks/use-mobile" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Skeleton } from "@/components/ui/skeleton" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_ICON = "5rem" const SIDEBAR_KEYBOARD_SHORTCUT = "b" type SidebarContextProps = { state: "expanded" | "collapsed" open: boolean setOpen: (open: boolean) => void openMobile: boolean setOpenMobile: (open: boolean) => void isMobile: boolean toggleSidebar: () => void } const SidebarContext = React.createContext(null) function useSidebar() { const context = React.useContext(SidebarContext) if (!context) { throw new Error("useSidebar must be used within a SidebarProvider.") } return context } function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & { defaultOpen?: boolean open?: boolean onOpenChange?: (open: boolean) => void }) { const isMobile = useIsMobile() const [openMobile, setOpenMobile] = React.useState(false) // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = React.useState(defaultOpen) const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value if (setOpenProp) { setOpenProp(openState) } else { _setOpen(openState) } // This sets the cookie to keep the sidebar state. document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` }, [setOpenProp, open], ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen, setOpenMobile]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) { event.preventDefault() toggleSidebar() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed" const contextValue = React.useMemo( () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar], ) return (

{children}

) } const Sidebar = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { side?: "left" | "right" variant?: "sidebar" | "floating" | "inset" collapsible?: "offcanvas" | "icon" | "none" } >(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => { const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === "none") { return (

{children}

) } return (

{/* This is what handles the sidebar gap on desktop */}

{children}

) }) function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps) { const { toggleSidebar } = useSidebar() return ( ) } function SidebarRail({ className, ...props }: React.ComponentProps<"button">) { const { toggleSidebar } = useSidebar() return (

{isCanvasSelected && "Canvas Settings"} {isLayerSelected && `${layer.type.charAt(0).toUpperCase() + layer.type.slice(1)} Layer`} {isEffectSelected && `${effect.type.charAt(0).toUpperCase() + effect.type.slice(1)} Effect`} {!isCanvasSelected && !isLayerSelected && !isEffectSelected && "Settings"}

{/* Canvas Settings */} {isCanvasSelected && (

Width updateCanvas({ width: Number.parseInt(e.target.value) || 800 })} className="w-full h-8 text-base" />

Height updateCanvas({ height: Number.parseInt(e.target.value) || 600 })} className="w-full h-8 text-base" />

Background Color updateCanvas({ backgroundColor: color })} />

)} {isEffectSelected && (

{effect.type === "party" && ( <>

Intensity

updateEffect({ party: { ...effect.party, intensity: value, blendMode: effect.party?.blendMode || "overlay", }, }) } max={3} min={0.1} step={0.1} className="flex-1" /> {(effect.party?.intensity || 1).toFixed(1)}

Blend Mode

)} {effect.type === "intensifies" && (

Intensity

updateEffect({ intensifies: { intensity: value } })} max={5} min={0.1} step={0.1} className="flex-1" /> {(effect.intensifies?.intensity || 1).toFixed(1)}

)}

)} {/* Layer Settings */} {isLayerSelected && (

{/* Position and size */}

W updateLayer({ width: Number.parseInt(e.target.value) || 100 })} className="w-full h-8 text-base" />

H updateLayer({ height: Number.parseInt(e.target.value) || 100 })} className="w-full h-8 text-base" />

{/* Layer-specific properties */} {layer.type === "text" && ( <>

Text

updateLayer({ text: e.target.value })}
                      placeholder="Enter text..."
                      className="w-full px-2 py-1 bg-sidebar-accent border border-sidebar-border rounded-md text-sidebar-foreground resize-none text-base"
                      rows={2}
                    />
                  </div>

<div>
                    <Label className="text-xs font-medium text-sidebar-foreground block mb-1">Size</Label>
                    <Input
                      type="number"
                      value={layer.fontSize || 32}
                      onChange={(e) => updateLayer({ fontSize: Number.parseInt(e.target.value) || 32 })}
                      className="w-full h-8 text-base"
                      min="8"
                      max="200"
                    />
                  </div>
                  <div>
                    <Label className="text-xs font-medium text-sidebar-foreground block mb-1">Color</Label>
                    <ColorPicker
                      value={layer.color || "#000000"}
                      onChange={(color) => updateLayer({ color })}
                      placeholder="#000000"
                    />
                  </div>

<div>
                    <Label className="text-xs font-medium text-sidebar-foreground block mb-1">Font</Label>
                    <Select
                      value={layer.fontFamily || "Geist"}
                      onValueChange={(value) => updateLayer({ fontFamily: value })}
                    >
                      <SelectTrigger className="w-full h-8 text-base">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {FONT_OPTIONS.map((font) => (
                          <SelectItem key={font.value} value={font.value}>
                            {font.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label className="text-xs font-medium text-sidebar-foreground block mb-1">Align</Label>
                    <Select
                      value={layer.textAlign || "left"}
                      onValueChange={(value: "left" | "center" | "right") => updateLayer({ textAlign: value })}
                    >
                      <SelectTrigger className="w-full h-8 text-base">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="left">Left</SelectItem>
                        <SelectItem value="center">Center</SelectItem>
                        <SelectItem value="right">Right</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </>
              )}

{layer.type === "rectangle" && (
                <>
                  <div>
                    <Label className="text-xs font-medium text-sidebar-foreground block mb-1">Color</Label>
                    <ColorPicker
                      value={layer.color || "#6366f1"}
                      onChange={(color) => updateLayer({ color })}
                      placeholder="#6366f1"
                    />
                  </div>

<div>
                    <Label className="text-xs font-medium text-sidebar-foreground block mb-1">Radius</Label>
                    <div className="flex items-center gap-1">
                      <Slider
                        value={[layer.borderRadius || 0]}
                        onValueChange={([value]) => updateLayer({ borderRadius: value })}
                        max={100}
                        min={0}
                        step={1}
                        className="flex-1"
                      />
                      <span className="text-xs text-sidebar-muted-foreground w-8 text-right">
                        {layer.borderRadius || 0}%
                      </span>
                    </div>
                  </div>
                </>
              )}

{layer.type === "image" && (
                <div className="col-span-2">
                  <Label className="text-xs font-medium text-sidebar-foreground block mb-1">Image</Label>
                  <div
                    className="border-2 border-dashed border-sidebar-border rounded-md p-2 text-center cursor-pointer hover:border-sidebar-accent transition-colors"
                    onClick={() => imageInputRef.current?.click()}
                  >
                    <div className="text-xs text-sidebar-muted-foreground">Click to change</div>
                    {layer.src && (
                      <img
                        src={layer.src || "/placeholder.svg"}
                        alt="Preview"
                        className="mt-1 max-w-full max-h-16 mx-auto rounded"
                      />
                    )}
                  </div>
                  <input
                    ref={imageInputRef}
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={(e) => {
                      const file = e.target.files?.[0]
                      if (file) {
                        const reader = new FileReader()
                        reader.onload = (event) => {
                          const result = event.target?.result as string
                          updateLayer({ src: result })
                        }
                        reader.readAsDataURL(file)
                      }
                    }}
                  />
                </div>
              )}
            </div>
          )}

{/* No selection state */}
          {!isCanvasSelected && !isLayerSelected && !isEffectSelected && (
            <div className="text-center py-8">
              <p className="text-sidebar-muted-foreground">Select a layer, effect, or canvas to edit its settings</p>
            </div>
          )}
        </div>
      </motion.div>
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useCallback, useRef, useState, useEffect } from "react"
import { Canvas } from "@/components/canvas"
import { createExportPayload, downloadGifBlob, exportToGif } from "@/lib/export-utils"
import { AppSidebar } from "@/components/app-sidebar"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { UnifiedSettingsDrawer } from "@/components/unified-settings-drawer"

export const dynamic = "force-dynamic"

type Layer = {
  id: string
  type: "text" | "image" | "rectangle"
  name: string
  x?: number
  y?: number
  width?: number
  height?: number
  scale?: number
  rotation?: number
  color?: string
  fontSize?: number
  fontFamily?: string
  fontWeight?: string
  textAlign?: "left" | "center" | "right"
  text?: string
  image?: HTMLImageElement
  borderRadius?: number // 0-100 percentage
  zIndex?: number
}

type Effect = {
  id: string
  type: "party" | "intensifies" // Replaced blur with party
  party?: { intensity: number; blendMode: "multiply" | "screen" | "overlay" }
  intensifies?: { intensity: number }
}

// Add Canvas type for the base layer
type CanvasType = {
  width: number
  height: number
  backgroundColor: string
}

// Updated font family options with modern Google Fonts stack
const FONT_OPTIONS = [
  { value: "Geist, -apple-system, BlinkMacSystemFont, sans-serif", label: "Geist" },
  { value: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", label: "Inter" },
  { value: "Space Grotesk, -apple-system, BlinkMacSystemFont, sans-serif", label: "Space Grotesk" },
  { value: "Poppins, -apple-system, BlinkMacSystemFont, sans-serif", label: "Poppins" },
  { value: "Playfair Display, Georgia, serif", label: "Playfair Display" },
  { value: "JetBrains Mono, 'Fira Code', Consolas, monospace", label: "JetBrains Mono" },
  { value: "Fira Code, 'JetBrains Mono', Consolas, monospace", label: "Fira Code" },
  { value: "-apple-system, BlinkMacSystemFont, sans-serif", label: "System" },
]

function ClientOnlyHome() {
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return (
      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
        <div className="text-gray-500">Loading...</div>
      </div>
    )
  }

return <HomeContent />
}

function HomeContent() {
  const [layers, setLayers] = useState<Layer[]>([])
  const [effects, setEffects] = useState<Effect[]>([])
  // Add canvas state with default dimensions
  const [canvas, setCanvas] = useState<CanvasType>({
    width: 144,
    height: 144,
    backgroundColor: "#00000000",
  })
  // Add unified timeline state that can contain both layers and effects in any order
  const [timeline, setTimeline] = useState<Array<{ type: "layer" | "effect" | "canvas"; id: string }>>([
    // Canvas is always the first item in timeline
    { type: "canvas", id: "canvas" },
  ])
  const [selectedEffect, setSelectedEffect] = useState<string | null>(null)
  const [selectedLayer, setSelectedLayer] = useState<string | null>(null)
  const [selectedCanvas, setSelectedCanvas] = useState<boolean>(false)
  const [timelineCollapsed, setTimelineCollapsed] = useState(false)
  const isProcessing = useRef(false)
  const [showSettingsDrawer, setShowSettingsDrawer] = useState(false)

// Add layer to both layers array and timeline
  const addLayer = useCallback(
    (newLayer: Layer) => {
      const layerCount = timeline.filter((item) => item.type === "layer").length

// Center the layer on the canvas
      const centeredLayer = {
        ...newLayer,
        x: newLayer.x ?? canvas.width / 2 - (newLayer.width || 100) / 2,
        y: newLayer.y ?? canvas.height / 2 - (newLayer.height || 100) / 2,
        scale: newLayer.scale ?? 1,
        rotation: newLayer.rotation ?? 0,
        zIndex: layerCount, // Set zIndex based on layer count
      }
      setLayers((prev) => [...prev, centeredLayer])
      // Add to end of timeline
      setTimeline((prev) => [...prev, { type: "layer", id: centeredLayer.id }])
      setSelectedLayer(centeredLayer.id)
    },
    [canvas.width, canvas.height, timeline],
  )

// Add effect to both effects array and timeline
  const addEffect = useCallback((newEffect: Effect) => {
    setEffects((prev) => [...prev, newEffect])
    // Add to end of timeline
    setTimeline((prev) => [...prev, { type: "effect", id: newEffect.id }])
  }, [])

// Handle image paste from clipboard
  const handlePaste = useCallback(
    (e: React.ClipboardEvent) => {
      const items = e.clipboardData?.items
      if (!items) return

for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          const blob = items[i].getAsFile()
          if (blob) {
            const reader = new FileReader()
            reader.onload = (event) => {
              const img = new Image()
              img.onload = () => {
                const newLayer: Layer = {
                  id: Date.now().toString() + Math.random(),
                  type: "image", // Changed from "sticker" to "image"
                  image: { width: img.width, height: img.height },
                  src: event.target?.result as string,
                  name: `Pasted Image`,
                }
                addLayer(newLayer)
              }
              img.src = event.target?.result as string
            }
            reader.readAsDataURL(blob)
          }
          break
        }
      }
    },
    [addLayer],
  )

const handleExport = useCallback(async () => {
    if (layers.length === 0 || isProcessing.current) return

console.log("Starting export process...")
    isProcessing.current = true

try {
      console.log("Creating export payload...")
      const exportOptions = createExportPayload(layers, effects, canvas, timeline)
      console.log("Export payload created:", exportOptions)

console.log("Generating GIF...")
      const blob = await exportToGif(exportOptions)
      console.log("GIF generated successfully, downloading...")

downloadGifBlob(blob, effects.length)
      console.log("Download initiated")
    } catch (error) {
      console.error("Error exporting GIF:", error)
      alert(`Error exporting GIF: ${error instanceof Error ? error.message : "Unknown error"}`)
    } finally {
      isProcessing.current = false
      console.log("Export process completed")
    }
  }, [layers, effects, canvas, timeline]) // Added timeline dependency

const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault()
      e.stopPropagation()

const files = e.dataTransfer.files
      if (!files) return

Array.from(files).forEach((file) => {
        if (file.type.startsWith("image/")) {
          const reader = new FileReader()
          reader.onload = (event) => {
            const img = new Image()
            img.onload = () => {
              const newLayer: Layer = {
                id: Date.now().toString() + Math.random(),
                type: "image", // Changed from "sticker" to "image"
                image: { width: img.width, height: img.height },
                src: event.target?.result as string,
                name: file.name.replace(/\.[^/.]+$/, ""),
              }
              addLayer(newLayer)
            }
            img.src = event.target?.result as string
          }
          reader.readAsDataURL(file)
        }
      })
    },
    [addLayer],
  )

useEffect(() => {
    if (selectedLayer || selectedCanvas || selectedEffect) {
      setShowSettingsDrawer(true)
    } else {
      setShowSettingsDrawer(false)
    }
  }, [selectedLayer, selectedCanvas, selectedEffect])

const handleCloseSettings = useCallback(() => {
    setShowSettingsDrawer(false)
    setSelectedLayer(null)
    setSelectedCanvas(false)
  }, [])

const currentSelectedLayer = selectedLayer ? layers.find((layer) => layer.id === selectedLayer) : null
  const currentSelectedEffect = selectedEffect ? effects.find((effect) => effect.id === selectedEffect) : null

return (
    <SidebarProvider defaultOpen={false}>
      {/* Removed LayersList props since functionality is now in AppSidebar */}
      <AppSidebar
        handleExport={handleExport}
        isProcessing={isProcessing.current}
        layers={layers}
        effects={effects}
        canvas={canvas}
        timeline={timeline}
        selectedLayer={selectedLayer}
        selectedEffect={selectedEffect}
        selectedCanvas={selectedCanvas}
        setLayers={setLayers}
        setEffects={setEffects}
        setCanvas={setCanvas}
        setSelectedLayer={setSelectedLayer}
        setSelectedEffect={setSelectedEffect}
        setSelectedCanvas={setSelectedCanvas}
        setTimeline={setTimeline}
        addLayer={addLayer}
        addEffect={addEffect}
        FONT_OPTIONS={FONT_OPTIONS}
      />
      <SidebarInset>
        <div className="flex flex-1 flex-col lg:flex-row h-screen">
          {/* Canvas area - centered with left offset on large screens */}
          <Canvas
            layers={layers}
            effects={effects}
            canvas={canvas}
            timeline={timeline}
            selectedLayer={selectedLayer}
            setSelectedLayer={setSelectedLayer}
            setSelectedEffect={setSelectedEffect}
            setLayers={setLayers}
            onDrop={handleDrop}
            onPaste={handlePaste}
          />
        </div>
      </SidebarInset>

<UnifiedSettingsDrawer
        layer={currentSelectedLayer}
        layers={layers}
        setLayers={setLayers}
        FONT_OPTIONS={FONT_OPTIONS}
        canvas={canvas}
        setCanvas={setCanvas}
        effect={currentSelectedEffect}
        effects={effects}
        setEffects={setEffects}
        isOpen={showSettingsDrawer}
        onClose={handleCloseSettings}
      />
    </SidebarProvider>
  )
}

export default ClientOnlyHome
[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" isQuickEdit="true"
"use client"
import { SidebarMenuButton } from "@/components/ui/sidebar"
import { SidebarGroupContent } from "@/components/ui/sidebar"
import { SidebarGroup } from "@/components/ui/sidebar"
import type React from "react"
import { useRef } from "react"
import { Sidebar, SidebarContent, SidebarMenu, SidebarMenuItem } from "@/components/ui/sidebar"
import { Download, ImageIcon, Zap, PartyPopper, Type, Square } from "lucide-react"
import { Reorder } from "framer-motion"
import { cn } from "@/lib/utils"

type Effect = {
  id: string
  type: "party" | "intensifies"
  party?: { intensity: number; blendMode: "multiply" | "screen" | "overlay" }
  intensifies?: { intensity: number }
}

type Canvas = {
  width: number
  height: number
  backgroundColor: string
}

type TimelineItem = {
  type: "layer" | "effect" | "canvas"
  id: string
  name: string
}

interface AppSidebarProps {
  handleExport?: () => void
  isProcessing?: boolean
  layers?: Layer[]
  effects?: Effect[]
  canvas?: Canvas
  timeline?: TimelineItem[]
  selectedLayer?: string | null
  selectedEffect?: string | null
  selectedCanvas?: boolean
  setLayers?: React.Dispatch<React.SetStateAction<Layer[]>>
  setEffects?: React.Dispatch<React.SetStateAction<Effect[]>>
  setCanvas?: (canvas: Canvas) => void
  setSelectedLayer?: (id: string | null) => void
  setSelectedEffect?: (id: string | null) => void
  setSelectedCanvas?: (selected: boolean) => void
  setTimeline?: React.Dispatch<React.SetStateAction<TimelineItem[]>>
  addLayer?: (layer: Layer) => void
  addEffect?: (Effect: Effect) => void
  FONT_OPTIONS?: Array<{ value: string; label: string }>
}

export function AppSidebar({
  handleExport,
  isProcessing,
  layers = [],
  effects = [],
  canvas,
  timeline = [],
  selectedLayer,
  selectedEffect,
  selectedCanvas,
  setLayers,
  setEffects,
  setCanvas,
  setSelectedLayer,
  setSelectedEffect,
  setSelectedCanvas,
  setTimeline,
  addLayer,
  addEffect,
}: AppSidebarProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const imageInputRef = useRef<HTMLInputElement>(null)

const handleTimelineReorder = (newTimeline: TimelineItem[]) => {
    if (!setTimeline || !setLayers) return
    setTimeline(newTimeline)

// Layers that appear later in timeline should have higher zIndex (render on top)
    const layerUpdates: { [key: string]: number } = {}
    let zIndexCounter = 0

newTimeline.forEach((item) => {
      if (item.type === "layer") {
        layerUpdates[item.id] = zIndexCounter
        zIndexCounter++
      }
    })

// Apply zIndex updates to layers
    setLayers((prevLayers) =>
      prevLayers.map((layer) => ({
        ...layer,
        zIndex: layerUpdates[layer.id] ?? layer.zIndex ?? 0,
      })),
    )
  }

const handleAddImage = () => {
    fileInputRef.current?.click()
  }

const handleAddText = () => {
    if (!addLayer || !canvas) return
    const newLayer: Layer = {
      id: Date.now().toString() + Math.random(),
      type: "text",
      name: `Text ${layers.filter((l) => l.type === "text").length + 1}`,
      text: "Text",
      color: "#000000",
      fontSize: 32,
      fontFamily: "Geist, -apple-system, BlinkMacSystemFont, sans-serif",
      fontWeight: "bold",
      textAlign: "center",
      width: 144,
      height: 144,
    }
    addLayer(newLayer)
  }

const handleAddShape = () => {
    if (!addLayer || !canvas) return
    const newLayer: Layer = {
      id: Date.now().toString() + Math.random(),
      type: "rectangle",
      name: `Shape ${layers.filter((l) => l.type === "rectangle").length + 1}`,
      color: "#6366f1",
      width: canvas.width,
      height: canvas.height,
      borderRadius: 15,
    }
    addLayer(newLayer)
  }

const handleAddParty = () => {
    if (!addEffect) return
    const newEffect: Effect = {
      id: Date.now().toString() + Math.random(),
      type: "party",
      party: { intensity: 1, blendMode: "overlay" },
    }
    addEffect(newEffect)
  }

const handleAddIntensifies = () => {
    if (!addEffect) return
    const newEffect: Effect = {
      id: Date.now().toString() + Math.random(),
      type: "intensifies",
      intensifies: { intensity: 1 },
    }
    addEffect(newEffect)
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file && addLayer && canvas) {
      const reader = new FileReader()
      reader.onload = (event) => {
        const result = event.target?.result as string
        const newLayer: Layer = {
          id: Date.now().toString() + Math.random(),
          type: "image",
          name: file.name,
          src: result,
          width: canvas.width,
          height: canvas.height,
        }
        addLayer(newLayer)
      }
      reader.readAsDataURL(file)
    }
  }

const updateLayer = (layerId: string, updates: Partial<Layer>) => {
    if (!setLayers) return
    setLayers((prev) => prev.map((layer) => (layer.id === layerId ? { ...layer, ...updates } : layer)))
  }

const removeLayer = (layerId: string) => {
    if (!setLayers || !setTimeline) return
    setLayers((prev) => prev.filter((layer) => layer.id !== layerId))
    setTimeline((prev) => prev.filter((item) => item.type !== "layer" || item.id !== layerId))
  }

const updateEffect = (effectId: string, updates: Partial<Effect>) => {
    if (!setEffects) return
    setEffects((prev) => prev.map((effect) => (effect.id === effectId ? { ...effect, ...updates } : effect)))
  }

const removeEffect = (effectId: string) => {
    if (!setEffects || !setTimeline) return
    setEffects((prev) => prev.filter((effect) => effect.id !== effectId))
    setTimeline((prev) => prev.filter((item) => item.type !== "effect" || item.id !== effectId))
  }

const getLayerDisplayName = (layer: Layer) => {
    if (layer.type === "text" && layer.text) {
      return layer.text.length > 20 ? `${layer.text.substring(0, 20)}...` : layer.text
    }
    if (layer.type === "rectangle" && layer.color) {
      return layer.color
    }
    if (layer.type === "image" && layer.name) {
      return layer.name
    }
    return layer.name || "Untitled"
  }

return (
    <Sidebar collapsible="icon" className="bg-black" variant="sidebar">
      <SidebarContent className="bg-black overflow-visible">
        <SidebarGroup>
          <SidebarGroupContent className="overflow-visible">
            <Reorder.Group
              axis="y"
              values={[...timeline].reverse()}
              onReorder={(newOrder) => handleTimelineReorder([...newOrder].reverse())}
              className="space-y-1 overflow-visible"
            >
              {[...timeline].reverse().map((timelineItem, timelineIndex) => {
                const reversedIndex = timeline.length - 1 - timelineIndex

return (
                  <Reorder.Item
                    key={`${timelineItem.type}-${timelineItem.id}`}
                    value={timelineItem}
                    dragListener={timelineItem.type !== "canvas"}
                    dragControls={timelineItem.type === "canvas" ? undefined : undefined}
                    className={cn(
                      "flex items-center justify-between p-3 rounded-lg w-fit cursor-pointer transition-colors overflow-visible relative",
                      timelineItem.type === "canvas" && selectedCanvas
                        ? "bg-neutral-900"
                        : timelineItem.type === "layer" && selectedLayer === timelineItem.id
                          ? "bg-neutral-900"
                          : timelineItem.type === "effect" && selectedEffect === timelineItem.id
                            ? "bg-neutral-900"
                            : "hover:bg-neutral-900",
                      timelineItem.type === "canvas" && "cursor-default opacity-75",
                    )}
                    onClick={() => {
                      if (timelineItem.type === "layer") {
                        setSelectedLayer?.(selectedLayer === timelineItem.id ? null : timelineItem.id)
                      } else if (timelineItem.type === "effect") {
                        setSelectedEffect?.(selectedEffect === timelineItem.id ? null : timelineItem.id)
                      } else if (timelineItem.type === "canvas") {
                        setSelectedCanvas?.(selectedCanvas ? false : true)
                        setSelectedLayer?.(null)
                        setSelectedEffect?.(null)
                      }
                    }}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.2 }}
                    whileDrag={
                      timelineItem.type !== "canvas"
                        ? {
                            scale: 1.05,
                            boxShadow: "0 10px 30px rgba(0,0,0,0.3)",
                            zIndex: 1000,
                          }
                        : undefined
                    }
                  >
                    <div className="flex items-center justify-between w-full overflow-visible relative">
                      <div className="flex items-center gap-3 overflow-visible">
                        <span className="text-sm font-medium text-neutral-300 whitespace-nowrap relative z-50">
                          {timelineItem.type === "canvas" && "Background"}
                          {timelineItem.type === "layer" &&
                            (() => {
                              const layer = layers.find((l) => l.id === timelineItem.id)
                              return layer ? getLayerDisplayName(layer) : "Unknown Layer"
                            })()}
                          {timelineItem.type === "effect" && effects.find((e) => e.id === timelineItem.id)?.type}
                        </span>
                      </div>
                    </div>
                  </Reorder.Item>
                )
              })}
            </Reorder.Group>
          </SidebarGroupContent>
        </SidebarGroup>

<SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton
                  onClick={handleAddImage}
                  className="cursor-pointer text-neutral-300 hover:bg-neutral-900 group-data-[collapsible=icon]:size-16 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center"
                >
                  <div className="size-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded flex items-center justify-center">
                    <ImageIcon className="w-8 h-8 text-white group-data-[collapsible=icon]:w-6 group-data-[collapsible=icon]:h-6" />
                  </div>
                  <span className="group-data-[collapsible=icon]:hidden">Add Image</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton
                  onClick={handleAddText}
                  className="cursor-pointer text-neutral-300 hover:bg-neutral-900 group-data-[collapsible=icon]:size-16 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center"
                >
                  <div className="size-12 bg-gradient-to-br from-green-400 to-green-600 rounded flex items-center justify-center">
                    <Type className="w-8 h-8 text-white group-data-[collapsible=icon]:w-6 group-data-[collapsible=icon]:h-6" />
                  </div>
                  <span className="group-data-[collapsible=icon]:hidden">Add Text</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton
                  onClick={handleAddShape}
                  className="cursor-pointer text-neutral-300 hover:bg-neutral-900 group-data-[collapsible=icon]:size-16 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center"
                >
                  <div className="size-12 bg-gradient-to-br from-orange-400 to-orange-600 rounded flex items-center justify-center">
                    <Square className="w-8 h-8 text-white group-data-[collapsible=icon]:w-6 group-data-[collapsible=icon]:h-6" />
                  </div>
                  <span className="group-data-[collapsible=icon]:hidden">Add Shape</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton
                  onClick={handleAddParty}
                  className="cursor-pointer text-neutral-300 hover:bg-neutral-900 group-data-[collapsible=icon]:size-16 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center"
                >
                  <div
                    className="size-12 rounded"
                    style={{ background: "linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)" }}
                  >
                    <div className="w-full h-full flex items-center justify-center">
                      <PartyPopper className="w-8 h-8 text-white group-data-[collapsible=icon]:w-6 group-data-[collapsible=icon]:h-6" />
                    </div>
                  </div>
                  <span className="group-data-[collapsible=icon]:hidden">Party Effect</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton
                  onClick={handleAddIntensifies}
                  className="cursor-pointer text-neutral-300 hover:bg-neutral-900 group-data-[collapsible=icon]:size-16 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center"
                >
                  <div className="size-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded flex items-center justify-center">
                    <Zap className="w-8 h-8 text-white group-data-[collapsible=icon]:w-6 group-data-[collapsible=icon]:h-6" />
                  </div>
                  <span className="group-data-[collapsible=icon]:hidden">Intensifies Effect</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

<SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton
                  onClick={handleExport}
                  disabled={isProcessing}
                  className="cursor-pointer text-neutral-300 hover:bg-neutral-900 group-data-[collapsible=icon]:size-16 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:justify-center"
                >
                  <div className="size-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded flex items-center justify-center">
                    <Download className="w-8 h-8 text-white group-data-[collapsible=icon]:w-6 group-data-[collapsible=icon]:h-6" />
                  </div>
                  <span className="group-data-[collapsible=icon]:hidden">Export GIF</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileChange} />
    </Sidebar>
  )
}89:["$","$L93",null,{"chatId":"jB40ZJyj5IH","children":["$","$L94",null,{"data":{"@\"active-block\",\"jB40ZJyj5IH\",":{"id":"b_sOM0jcojRIu","messageId":"TYv3XJBSEVIZtKdmzLdDO4LsMneqaf3M","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"gif-creator","type":"code-project","project":"gif-creator","taskNameActive":"Removing extra spacing","taskNameComplete":"Removed extra spacing"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"jB40ZJyj5IH\",":false,"":null},"children":"$L96"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from jacobparis

More Templates Like This